<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <div v-bind:title="title"></div>
    <div :title="title"></div>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
动态的绑定一个或多个 attribute，也可以是组件的 prop。
缩写：: 或者 . (当使用 .prop 修饰符)
期望：any (带参数) | Object (不带参数)
参数：attrOrProp (可选的)
修饰符
    .camel - 将短横线命名的 attribute 转变为驼峰式命名。
    .prop - 强制绑定为 DOM property。3.2+
    .attr - 强制绑定为 DOM attribute。3.2+
用途
    当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。
    在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。
    当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。
    当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。
    * */
    const app = Vue.createApp({
        data() {
            return {
                title:"hello coder"
            }
        },
    })
    app.mount("#app")

</script>
</body>
</html>